<template>
 <div class="home" :class="{home_hide:hideflage}">
	 <div class="progressive home_progressive">
		 <img v-progressive="background1.preview" :src="background1.src" alt="" class="homebg_img">
	 </div>
	<div class="big_box">
		<div class="progressive home_progressive">
			<img v-progressive="background2.preview" :src="background2.src" alt="" class="big_box_img">
		</div>
		<div class="big_box_left">
			<div class="home_logo">
				<img src="../assets/image/home/logo.png" alt="">
			</div>
			<div class="left_tit"><img src="../assets/image/home/left_tit.png" alt=""></div>
			<div class="left_bing_box">
				<div class="left_bing_box_txt">
					<div>测评重点 <span> 词语逻辑</span>模块</div>
					<div>平均分<span>89</span>分</div>
					<div class="left_bing_box_sort">
						<div v-for="v in 3">
							<div></div>
							<div>阅读广度</div>
						</div>

					</div>
				</div>
				<div class="left_bing_charts">
					<div  id="bing"></div>
					<div class="bing_head">
						<div class="big_head_bg2">
							<div class="big_head_user">
								<img src="../assets/image/home/default_head.png" alt="">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="big_box_right">
			<div class="big_box_right_tit">
				<img src="../assets/image/home/center.png" alt="">
			</div>
			<div class="big_box_right_tit2">
				<img src="../assets/image/home/paizi.gif" alt="">

			</div>
			<div class="lesson_box">
				<div class="lesson_item" v-for=" (v,n) in moduleList" @click="golesson(v.code)" :class="{mar_r0:(n+1)%5==0}">
					<div>
						<img :src="v.image" alt="">
					</div>
					<div>{{v.title}}</div>
				</div>
			</div>
		</div>
		<div class="kefu_box" :class="{kefu_box_anmation:beginflag}" @click="goToNewPages('/personal')">
			<div class="kefu_tit" v-if="beginflag2"></div>
		</div>
		<div class="userbox">
			<div class="userbox_top">
				<div class="userbox_top_left">
					<div>小雨同学</div>
					<div>3</div>
				</div>
				<div class="userbox_top_right">
					<img src="../assets/image/home/head.png" alt="">
				</div>
			</div>
			<div class="userbox_btm">
				<div class="userbox_background"></div>
				<div class="userbox_txt">
					<span>er值 300</span>
					<img src="../assets/image/home/right_arr.png" alt="">
				</div>
			</div>
		</div>
		<div class="handle_box">
			        <!-- 收藏夹 -->
        <img src="@/assets/image/home/handle1.png" alt="" @click="goToNewPages('/collection','collection')"/>
        <!-- 错题库 -->
        <img src="@/assets/image/home/handle2.png" alt="" @click="goToNewPages('/collection','wrong')"/>
        <!-- 打卡 -->
        <img src="@/assets/image/home/handle3.png" alt="" @click="goToNewPages('/punchClock')"/>

		</div>
	</div>
 </div>
</template>

<script>
import background1 from '../assets/image/home/background1.png'	
import background1_mh from '../assets/image/home/background1_mh.png'	
import background2 from '../assets/image/home/background2.png'	
import background2_mh from '../assets/image/home/background2_mh.png'	
export default {
  name: 'floor',
   data() {
 	return {
		hideflage:false,
		beginflag:false,    //加载初始动画
		beginflag2:false,    //加载延时动画
		moduleList:[],
		userInfo:"",
		background1:{
			src:background1,
			preview:background1_mh
		},
		background2:{
			src:background2,
			preview:background2_mh
		}
 	}
 },
		mounted(){
			console.log(this.$store.state.userInfo)
			this.userInfo=this.$store.state.userInfo
			// this.login()
			this.isloging(this.renderPage)
			// this.renderPage()
			this.beginflag=true
			setTimeout(()=>{
				this.beginflag2=true
			},800)
			// 				<div class="left_top_charts" id="bing"></div>
			var echarts = require('echarts');
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('bing'));
			myChart.setOption({
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)'
			},
			legend: {
				orient: 'vertical',
				left: 10,
				data: []
			},
			series: [
				{
					name: '访问来源',
					type: 'pie',
					radius: ['50%', '70%'],
					avoidLabelOverlap: false,
					label: {
						show: false,
						position: 'center'
					},
					emphasis: {
						label: {
							show: true,
							fontSize: '15',
							fontWeight: 'bold'
						}
					},
					labelLine: {
						show: false
					},
					data: [
						{value: 335, name: '直接访问'},
						{value: 310, name: '邮件营销'},
						{value: 234, name: '联盟广告'},
						{value: 135, name: '视频广告'},
						{value: 1548, name: '搜索引擎'}
					]
				}
			]
		});
		},
		beforeDestroy() {


		},
		 methods:{
			 isloging(fx){
				 this.$request.get("check_login", {
				 }).then((res)=>{
					 console.log(res)
					 if(res.data.code==200&&fx){
						 fx()
					 }
				 })
			 },
			 renderPage(){
				 this.$request.get("getModuleList", {
				 }).then((res)=>{
					 console.log(res)
					 this.moduleList=res.data.data
				 })
			 },
			 golesson(n){
				 if(n){
					 this.$emit("showloading",{
					 	methods:'push',
					 	path:'/lessonIntroduce',
						query:{
							class:n
						}
					 })
					 return
				 }
				
				 this.$message({
				           message: '警告,该模块还没做完',
				           type: 'warning'
				         });
			 },
			goIntroduce(n){
				this.$router.push({'path':'/lessonIntroduce',query:{id:n}})
			},
			gocollection(){
				this.$router.push({'path':'/collection'})
				this.$router.redirect
			},
			gofeiji(){
				this.hideflage=true
				// this.hideflage=false
				this.$emit("showloading",{
					methods:'push',
					path:'/lessonIntroduce'
				})
				setTimeout(()=>{

				},2000)
			},
			login(){
				this.$request.post("login",{
					username:"text1",
					password:"123456"
				}).then((res)=>{
					console.log(res.data.msg.token)
					this.$storage.set('token','Bearer '+res.data.msg.token)
				}).catch((err)=>{

				})
			},
			goIntroduce(n) {
			  this.$router.push({ path: "/lessonIntroduce", query: { id: n } });
			},
			gocollection() {
			  this.$router.push({ path: "/collection" });
			  this.$router.redirect;
			},
			gofeiji() {
			  this.hideflage = true;
			  // this.hideflage=false
			  this.$emit("showloading", {
			    methods: "push",
			    path: "/lessonIntroduce",
			  });
			  setTimeout(() => {}, 2000);
			},
			login() {
			  this.$request
			    .post("login", {
			      username: "text1",
			      password: "123456",
			    })
			    .then((res) => {
			      console.log(res.data.msg.token);
			      this.$storage.set("token", "Bearer " + res.data.msg.token);
			    })
			    .catch((err) => {});
			},
			// 前往个人中心页
			goToNewPages(path,type) {
			  this.$emit("showloading", {
			    methods: "push",
			    path,
			    query:{type}
			  });
			},
			
		 },
  watch: {}
};
</script>
<style lang="less" scoped>
.home{
	width: 100vw;
	height: 100vh;
	// background-image: url('../assets/image/home/background1.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: relative;
	.home_progressive{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		
	}
	.homebg_img{
		width: 100%;
		height: 100%;
		
	}
	.big_box{
		width: 100%;
		height: 100%;
		background-image: url('../assets/image/home/background2.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		padding-right: 2.24rem;
		z-index: 1;
		.big_box_img{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		.big_box_left{
				z-index: 2;
				position: relative;
			.home_logo{
				width: 3.23rem;
				height: 1.6rem;
			
				&>img{
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.left_tit{
				width: 1.75rem;
				height: 0.35rem;
				margin: 0.51rem 0 0.17rem 0.35rem;
				&>img{
					width: 100%;
					height: 100%;
					display: block;
				}
			}
			.left_bing_box{
				width: 3.86rem;
				min-height: 2.64rem;
				margin-left: 0.46rem;
				position: relative;
				.left_bing_box_txt{
					&>div:nth-child(1),&>div:nth-child(2){
						color: #FFFFFF;
						font-size: 0.14rem;
						&>span{
							font-size: 0.16rem;
							margin: 0 0.04rem 0 0.06rem;
						}
					}
					&>div:nth-child(2){
						margin-top: 0.14rem;
					}
					.left_bing_box_sort{
						margin-top: 0.43rem;
						&>div{
							cursor: pointer;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							margin-bottom: 0.1rem;
							&>div:nth-child(1){
								margin-right: 0.1rem;
								// box-shadow: 0px 0.01rem 0.03rem 0px rgba(227, 222, 255, 0.6);
								border-radius: 0.03rem;
								width: 0.13rem;
								height: 0.05rem;
								background: linear-gradient(0deg, #54D0FE 0%, #ADF1FF 100%);
							}
							&>div:nth-child(2){
								color: #FFFFFF;
								font-size: 0.14rem;
							}
						}
						&>div:hover{
							display: flex;
							align-items: center;
							justify-content: flex-start;
							&>div:nth-child(1){
								box-shadow: 0px 0.01rem 0.03rem 0px rgba(227, 222, 255, 0.6);
							}
							&>div:nth-child(2){
								color: #FFFFFF;
								font-size: 0.16rem;
							}
						}
					}
				}
				.left_bing_charts{
					width: 2.67rem;
					position: absolute;
					height: 2.64rem;
					top: -0.5rem;
					right: 0;
					&>#bing{
						width: 100%;
						height: 100%;
					}
					.bing_head{
						width: 1.41rem;
						height: 1.41rem;
						border-radius: 50%;
						background-image: url(../assets/image/home/head_bg.png);
						background-repeat: no-repeat;
						background-size: 100% 100%;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						.big_head_bg2{
							width: 1.19rem;
							height: 1.19rem;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
							border-radius: 50%;
							background-repeat: no-repeat;
							background-size: 100% 100%;
							background-image: url(../assets/image/home/head_bg2.png);
							.big_head_user{
								top: 50%;
								left: 50%;
								transform: translate(-50%,-50%);
								border-radius: 50%;
								overflow: hidden;
								// width: 0.905rem;
								// height: 0.905rem;
								width: 1rem;
								height: 1rem;
								position: absolute;
								img{
									width: 100%;
									height: 100%;
									display: block;
								}
							}
						}
					}
				}
			}
		}
		.big_box_right{
			width: 9.35rem;
			padding-top: 0.9rem;
			z-index: 2;
			position: relative;
			.big_box_right_tit{
				width: 2.57rem;
				height: 0.76rem;
				margin: 0 auto;
				&>img{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.big_box_right_tit2{
				width: 1.66rem;
				// height: 0.32rem;
				margin: 0 auto;
				margin-top: -0.2rem;
				margin-bottom: 0.55rem;
				&>img{
					display: block;
					width: 100%;
					// height: 100%;
				}
			}
			.lesson_box{
				width: 100%;
				.lesson_item{
					animation-name: lessonshow;
					animation-duration: 1s;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-start;
					float: left;
					margin-bottom: 0.25rem;
					margin-right: 0.5rem;
					cursor: pointer;
					&>div:nth-child(1){
						width: 1.44rem;
						height: 1.44rem;
						display: flex;
						align-items: center;
						justify-content: center;
						&>img{
							width: 1.05rem;
							height: 1.05rem;
						}
					}

          & > div:nth-child(2) {
            width: 1.44rem;
            font-size: 0.21rem;
            color: #54595d;
            text-align: center;
          }
        }
        .lesson_item:hover {
          // margin-bottom: 0.25rem;
          // margin-right: 0.59rem;
          cursor: pointer;
          & > div:nth-child(1) {
            & > img {
              width: 1.44rem;
              height: 1.44rem;
            }
          }
          & > div {
            font-size: 0.21rem;
            color: #333;
          }
        }
      }
    }
  }
  .kefu_box {
    width: 1.52rem;
    height: 1.53rem;
    position: fixed;
    z-index: 1;
    left: 1.14rem;
    bottom: 1.61rem;
    background-image: url("../assets/image/home/kefu_quan.png");
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    transform: scale(0.2);
    transition: all 0.5s;
    .kefu_tit {
      width: 1.07rem;
      height: 0.38rem;
      background-image: url("../assets/image/home/kefu_tit.png");
      background-repeat: no-repeat;
      background-size: 100%;
      position: absolute;
      bottom: -0.08rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .kefu_box_anmation {
    transform: scale(1);
  }

  .userbox {
    min-width: 1.74rem;
    line-height: 0.62rem;
    box-sizing: border-box;
    padding: 0 0.42rem 0 0.48rem;
    font-size: 0.21rem;
    color: #212121;
    text-align: center;
    height: 0.72rem;
    position: fixed;
    top: 0.27rem;
    right: 0.37rem;
    background-image: url(../assets/image/home/user_box.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .user_vip {
      width: 0.61rem;
      height: 0.61rem;
      position: absolute;
      top: -0.205rem;
      left: -0.205rem;
    }
  }
  .handle_box {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    bottom: 0.57rem;
    right: 0.39rem;
    animation-name: lessonshow;
    animation-duration: 1s;
    & > img {
      width: 1.16rem;
      height: 1.16rem;
      cursor: pointer;
    }
  }
}
.kefu_box_anmation{
	transform: scale(1);
}

.userbox{
	position: fixed;
	top: 0.28rem;
	right: 0.41rem;
	.userbox_top{
		display: flex;
		align-items: center;
		.userbox_top_left{
			&>div:nth-child(1){
				font-size: 0.18rem;
				color: #212121;
			}
			&>div:nth-child(2){
				width: 0.81rem;
				height: 0.44rem;
				padding-right: 0.09rem;
				line-height: 0.4rem;
				box-sizing: border-box;
				background-image: url(../assets/image/home/vip.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				color: white;
				font-size: 0.16rem;
				text-align: right;
			}
		}
		.userbox_top_right{
			width: 0.74rem;
			height: 0.74rem;
			&>img{
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}
	.userbox_btm{
		width: 1.07rem;
		height: 0.31rem;
		border-radius: 0.16rem;
		position: relative;
		overflow: hidden;
		.userbox_background{
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			-webkit-filter:blur(20px);
			filter:blur(20px);
			background: white;
		}
		.userbox_txt{
			width: 100%;
			height: 100%;
			padding: 0 0.07rem 0 0.16rem;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 3;
			&>span{
				font-size: 0.16rem;
				color: #1E7DE7;
			}
			&>img{
				width: 0.07rem;
				height: 0.11rem;
				margin-left: 0.1rem;
			}
		}
	}

}
@keyframes lessonshow {
  from {
    opacity: 0.3;
  }
  to {
    opacity: 1;
  }
}
.home_hide {
  animation-name: homehide;
  animation-duration: 2s;
}
</style>
